<template>
	<view class="pagesbg">
		<!-- 头部 -->
		<view class="header_bar header_fixed header_main">
			<view class="header">
				<view class="header-goBack" @click="$tools.back(1)"></view>
				<view class="header-title">{{ typeName }}</view>
			</view> 
		</view> 
		<!-- 主体 -->
		<view class="first">
			<view class="firstBox">
				<view class="firstBox-padding">
					<view class="firstBox-form">
						<view class="firstBox-item">
							<view class="firstBox-item-input">
								<image class="firstBox-item-icon" src="@/static/operate/icon-user.png" mode=""></image>
								<input type="text" :placeholder="'请输入收款人姓名'" placeholder-class="inputStyle" v-model="name" />
							</view>
						</view>
						<view class="firstBox-item">
							<view class="firstBox-item-input">
								<image class="firstBox-item-icon" src="@/static/operate/icon-phone.png" mode=""></image>
								<input type="text" :placeholder="'请输入'+typeName+'号'" placeholder-class="inputStyle" v-model="account" />
							</view>
						</view>
						<view class="firstBox-item">
							<view class="firstBox-itemBox">
								<view class="firstBox-item-input firstBox-item-input--noMt">
									<image v-if="typeName == '微信'" class="firstBox-item-icon" src="@/static/operate/icon-wechat.png" mode=""></image>
									<image v-if="typeName == '支付宝'" class="firstBox-item-icon" src="@/static/operate/icon-alipay.png" mode=""></image>
									<input type="text" :placeholder="'请上传'+typeName+'收款码'" placeholder-class="inputStyle" disabled="disabled"/>
								</view>
								<u-upload :fileList="fileList1"
										@afterRead="afterRead"
										@delete="deletePic"
										name="1"
										:multiple="false"
										:maxCount="1"
										:previewFullImage="true">
									<image src="@/static/shop/addImg.png" mode="widthFix" style="width: 168rpx;height: 168rpx;"></image>
								</u-upload>
							</view>
						</view>
					</view>
					<view class="firstBox-next">
						<view class="firstBox-next-title"></view>
					</view>
				</view>
			</view>
		</view>
		<view class="initBtn" @tap.stop="$u.throttle(confirm,1500)">{{ id ? '修改' : '提交' }}</view>
	</view>
</template>

<script>
	import url from '@/common/js/url.js';
	export default {
		components:{
		},
		data(){
			return{
				isFocus: null,
				toggle: true,
				typeName: '',
				name: '',
				account: '',
				code: '',
				code_pic: '',
				id: '',
				fileList1: [],
				user: {},
				disabled: false,
				item: {},
				qiniu: {},
			}
		},
		computed:{
			type(){
				if(this.typeName == '支付宝'){
					return 2;
				}else if(this.typeName == '微信'){
					return 1;
				}else if(this.typeName == '银行卡'){
					return 3;
				}
			},
		},
		async onLoad(options) {
			// await this.init();
			this.typeName = options.value1;
			// if(JSON.stringify(options.value2) != "{}"){
			if(options.value2 && options.value2 != "{}"){
				this.item = JSON.parse(decodeURIComponent(options.value2));
				console.log("item：",this.item);
				this.name = this.item.bankName;
				this.account = this.item.withdrawalAccount;
				this.code_pic = this.item.bankCardName;
				this.fileList1 = [{url: ''}];
				this.fileList1[0].url = this.item.bankCardName;
				this.id = this.item.id;
			}
		},
		onShow() {
			this.init();
		},
		// 下拉刷新
		onPullDownRefresh() {
			console.log('refresh');
			this.init();
			setTimeout(function () {
				uni.stopPullDownRefresh();
			}, 500);
		},
		methods: {
			init(){
				// this.getQiNiuToken();
			},
			confirm(){
				if (!this.name) {
					return this.$tools.toast('请输入收款人姓名');
				}
				if (!this.account) {
					return this.$tools.toast('请输入'+this.typeName+'号');
				}
				if (this.code_pic == '' || this.code_pic == undefined) {
					return this.$tools.toast('请上传'+this.typeName+'收款码');
				}
				if(this.toggle){
					this.toggle = false;
					var data = {};
					if(JSON.stringify(this.item) != '{}'){
						data['id'] = this.id
					}
					data['type'] = this.type;
					data['bankName'] = this.name;
					data['withdrawalAccount'] = this.account;
					data['bankCardName'] = String(this.code_pic);
					console.log("data：",data);
					console.log("this.code_pic：",this.code_pic);
					this.$Ajax('/api/money/bindWithdrawalInfo',
					data,
					res => {
							this.toggle = true;
							this.$tools.toastBack('绑定'+this.typeName+'收款方式成功',1);
						},err =>{
							this.toggle = true;
						}
					)
				}
			},
			// 删除图片 (封面图)
			deletePic(event) {
				this[`fileList${event.name}`].splice(event.index, 1);
				this.code_pic = '';
			},
			// 新增图片
			async afterRead(event) {
				let that = this;
				console.log(event);
				uni.showLoading({
				    title: "上传中",
				    mask: true
				});
				// 当设置 multiple 为 true 时, file 为数组格式，否则为对象格式
				let lists = [].concat(event.file)
				let fileListLen = that[`fileList${event.name}`].length
				lists.map((item) => {
					that[`fileList${event.name}`].push({
						...item,
					})
				})
				let now_time = new Date().getTime();
				uni.uploadFile({
					url: url.webUrl+'/api/common/upload',
					filePath: lists[0].url,
					name: 'file',
					formData: {
						// 'key': now_time,
					},
					success: (uploadFileRes) => {
						let uploadImgUrl = JSON.parse(uploadFileRes.data).data;
						console.log("uploadImgUrl:",uploadImgUrl);
						this.code_pic = uploadImgUrl.url;
						uni.hideLoading();
					},
					fail: (error) => {
						console.log(error);
						uni.hideLoading();
					},
					complete: () => {
						setTimeout(function() {
							uni.hideLoading();
						}, 250);
					},
				});
			},
			/* clear & eye */
			focusInput(index) {
				this.isFocus = index;
			},
			blurInput(index) {
				this.isFocus = null;
			},
			clearData(keyName) {
				for (var key in this.$data) {
					if (key == keyName) {
						this.$data[key] = '';
					}
				}
			},
			toggleEyeStatus(index) {
				this.eyeShowHideArray[index].show = !this.eyeShowHideArray[index].show;
			}
		}
	}
</script>

<style lang="scss" scoped>
	@import '@/common/scss/pages/operate/operate';

	/deep/ .u-icon__icon{
		font-size: 50rpx !important;
		padding: 12rpx 0 0 0;
	}
	/deep/.u-upload__deletable{
		width: 50rpx !important;
		height: 50rpx !important;
		border-bottom-left-radius: 0 !important;
	} 
	
	.u-upload{ 
		margin: 0 32upx 24upx;
	}
	

	.operateBox{
		&-tabs{
			padding-top:30upx;
		}
		&-btn{
			margin: 0upx 31upx 160upx;
		}
	}
</style>